<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 粉色说明文字 -->
        <span class="explain">说明：目前支持学科和关键字条件筛选</span>
        <!-- 新增试题按钮 -->
        <el-row type="flex" justify="end">
          <el-button
            size="small"
            icon="el-icon-edit"
            type="success"
            @click="addQuestionFn"
          >新增试题</el-button>
        </el-row>
        <!-- form表单 -->
        <el-form ref="form" class="form" :model="form" label-width="80px">
          <el-form-item prop="subjectID" label="学科" class="item">
            <el-select
              v-model="form.subjectID"
              placeholder="请选择"
              @change="subChange"
            >
              <el-option
                v-for="(item, index) in sub"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="二级目录" class="item">
            <el-select v-model="form.catalogID" placeholder="请选择">
              <el-option
                v-for="(item, index) in catalog"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="标签" class="item">
            <el-select v-model="form.tags" placeholder="请选择">
              <el-option
                v-for="(item, index) in tags"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="关键字" class="item">
            <el-input
              v-model="form.keyword"
              placeholder="根据题干搜索"
            />
          </el-form-item>
          <el-form-item label="试题类型" class="item">
            <el-select v-model="form.questionType" placeholder="请选择">
              <el-option
                v-for="(item, index) in questionType"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="难度" class="item">
            <el-select v-model="form.difficulty" placeholder="请选择">
              <el-option
                v-for="item in difficulty"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="方向" class="item">
            <el-select v-model="form.direction" placeholder="请选择">
              <el-option
                v-for="(item, index) in direction"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="录入人" class="item">
            <el-select v-model="form.creatorID" placeholder="请选择">
              <el-option label="超级管理员" value="shanghai" />
              <el-option label="录入管理员" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="题目备注" class="item">
            <el-input v-model="form.remarks" />
          </el-form-item>
          <el-form-item label="企业简称" class="item">
            <el-input v-model="form.shortName" />
          </el-form-item>
          <el-form-item label="城市" class="item">
            <MyCity v-model="form.provAndCity" />
          </el-form-item>
          <el-form-item class="item">
            <el-row type="flex" justify="end">
              <el-button size="small" @click="removeFn">清除</el-button>
              <el-button
                size="small"
                type="primary"
                @click="searchFn"
              >搜索</el-button>
            </el-row>
          </el-form-item>
        </el-form>
        <!-- 数据条数展示栏 -->
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <span class="text">
                <i class="el-icon-info" />数据一共 {{ counts }} 条</span>
            </div></el-col>
        </el-row>
        <!-- 表格区域 -->
        <el-table
          class="table"
          :data="tableData"
          style="width: 100%"
          max-height="2500"
        >
          <el-table-column prop="number" label="试题编号" />
          <el-table-column prop="subject" label="学科" />
          <el-table-column prop="catalog" label="目录" />
          <el-table-column
            prop="questionType"
            :formatter="formatter"
            label="题型"
          />
          <el-table-column
            :formatter="formatter"
            prop="question"
            label="题干"
          >
            <template v-slot="scope">
              <span v-html="scope.row.question" />
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间">
            <template slot-scope="scope">
              <span>
                {{ myFuncton(scope.row.addDate) }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="difficulty"
            :formatter="formatter1"
            label="难度"
          />
          <el-table-column prop="creator" label="录入人" />
          <el-table-column width="200" label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                plain
                size="mini"
                circle
                @click="reviewFn(scope.row.id)"
              ><i class="el-icon-view" /></el-button>
              <el-button
                type="success"
                plain
                size="mini"
                circle
                @click="reviseFn(scope.row.id)"
              ><i class="el-icon-edit" /></el-button>
              <el-button
                type="danger"
                plain
                size="mini"
                circle
                @click="delFn(scope.row.id)"
              ><i class="el-icon-delete" /></el-button>
              <el-button
                type="warning"
                plain
                size="mini"
                circle
                @click="choiceFn(scope.row.id)"
              ><i class="el-icon-check" /></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row class="pag" type="flex" justify="end">
          <el-pagination
            :current-page="form.page"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="form.pagesize"
            layout="prev, pager, next, sizes,jumper"
            :total="counts"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>

        <!-- 预览弹框 -->
        <el-dialog title="题目预览" :visible.sync="dialogTableVisible" @close="closeFn">
          <el-descriptions :column="4">
            <el-descriptions-item label="【题型】">{{
              formatter("", "", dialog.questionType, "")
            }}</el-descriptions-item>
            <el-descriptions-item label="【编号】">{{
              dialog.id
            }}</el-descriptions-item>
            <el-descriptions-item label="【难度】">{{
              formatter1("", "", dialog.difficulty, "")
            }}</el-descriptions-item>
            <el-descriptions-item label="【标签】">
              {{ dialog.tags }}
            </el-descriptions-item>
            <el-descriptions-item label="【学科】">{{
              dialog.subjectName
            }}</el-descriptions-item>
            <el-descriptions-item label="【目录】">{{
              dialog.directoryName
            }}</el-descriptions-item>
            <el-descriptions-item label="【方向】">{{
              dialog.direction
            }}</el-descriptions-item>
          </el-descriptions>
          <!-- 分割线 -->
          <el-divider />

          <el-descriptions direction="vertical" :column="1">
            <el-descriptions-item
              content-style="color:rgb(0,0,255);"
              label="【题干】"
            >
              <span v-html="dialog.question" />
            </el-descriptions-item>
            <!-- 单选框 -->
            <el-descriptions-item
              v-if="isShow === '1'"
              label="单选题 选项: (以下选中的选项为正确答案)"
            >
              <el-radio-group v-model="radio">
                <el-radio
                  v-for="(item, index) in radioList"
                  :key="index"
                  style="display: block; margin-bottom: 10px"
                  :label="item.isRight"
                  :checked="item.isRight === 1 ? true : false"
                >
                  {{ item.code + "、" + item.title }}
                </el-radio>
              </el-radio-group>
            </el-descriptions-item>
            <el-descriptions-item
              v-if="isShow === '2'"
              label="多选题 选项: (以下选中的选项为正确答案)"
            >
              <!-- 复选框 -->
              <el-checkbox-group :value="checked">
                <el-checkbox
                  v-for="(item, index) in checkList"
                  :key="index"
                  style="display: block; margin-bottom: 10px"
                  :label="item.code + '、' + item.title"
                  :checked="item.isRight === 1 ? true : false"
                />
              </el-checkbox-group>
            </el-descriptions-item>
          </el-descriptions>
          <el-divider />
          <el-descriptions>
            <el-descriptions-item label="【参考答案】">
              <el-row>
                <el-button
                  class="button"
                  type="danger"
                  effect="dark"
                  @click="fullScreen"
                >视频答案解析</el-button>
              </el-row>
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions :colon="false">
            <el-descriptions-item label="">
              <el-row v-if="isShowscreen" class="screen">
                <video-player
                  ref="videoPlayer"
                  class="video-player vjs-custom-skin"
                  :playsinline="true"
                  :options="playerOptions"
                />
              </el-row>
            </el-descriptions-item>
          </el-descriptions>
          <el-divider />
          <el-descriptions>
            <el-descriptions-item label="【答案解析】">
              <span v-html="dialog.answer" />
            </el-descriptions-item>
          </el-descriptions>
          <el-divider />
          <el-descriptions>
            <el-descriptions-item label="【题目备注】">{{
              dialog.remarks
            }}</el-descriptions-item>
          </el-descriptions>
          <el-row type="flex" justify="end">
            <el-button type="primary" @click="closeDialog">关闭</el-button>
          </el-row>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { simple } from '@/api/hmmm/subjects'
import { simple as simpleDir } from '@/api/hmmm/directorys'
import { simple as simpleTags } from '@/api/hmmm/tags'
import { list, remove, detail, choiceAdd } from '@/api/hmmm/questions'
import MyCity from './questions/citys.vue'
import { videoPlayer } from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
import 'videojs-contrib-hls'
import 'videojs-flash'
export default {
  components: {
    MyCity,
    videoPlayer
  },
  data() {
    return {
      counts: 0,
      form: {
        subjectID: '', // 学科
        catalogID: '', // (二级)目录
        tags: '', // 标签(名称)
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        answerID: '', // 答案解析
        shortName: '', // 企业名称
        provAndCity: { // 企业所在城市
          province: '',
          city: ''
        },
        page: 1,
        pagesize: 5
      },
      // 学科
      sub: [],
      // 二级目录
      catalog: [],
      // 标签
      tags: [],
      // 答案解析
      dialogTableVisible: false,
      // 选项
      checkList: [],
      // 选中
      checked: [],
      // 表格数据
      tableData: [],
      // 加入精选状态
      choiceState: 1,
      // 弹框
      dialog: {},
      // 单选组选中
      radio: 1,
      // 单选数组
      radioList: [],
      // 单选多选切换
      isShow: '',
      // 视频组件显示
      isShowscreen: false,
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: 'video/mp4' || 'video/ogg' || 'video/webm', // 类型
          src: '' // url地址
        }],
        poster: '', // 封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true // 是否显示全屏按钮
        }
      }
    }
  },
  computed: {
    direction() {
      return direction
    },
    questionType() {
      return questionType
    },
    difficulty() {
      return difficulty
    }
  },
  created() {
    this.list()
    this.simple()
  },
  methods: {
    buildParams() {
      const paramsObj = {}
      const {
        page,
        pagesize,
        provAndCity,
        tags,
        state,
        subjectID,
        catalogID,
        keyword,
        questionType,
        difficulty,
        direction,
        creatorID,
        remarks,
        shortName
      } = this.form
      // 如果某一个参数是null,则axios就不会发这个参数
      // 如果某一个参数是""，axios是会发出这个参数
      paramsObj.page = page || null
      paramsObj.pagesize = pagesize || null
      paramsObj.tags = tags || null
      paramsObj.province = provAndCity.province || null
      paramsObj.city = provAndCity.city || null
      paramsObj.subjectID = subjectID || null
      paramsObj.catalogID = catalogID || null
      paramsObj.keyword = keyword || null
      paramsObj.questionType = questionType || null
      paramsObj.difficulty = difficulty || null
      paramsObj.direction = direction || null
      paramsObj.creatorID = creatorID || null
      paramsObj.remarks = remarks || null
      paramsObj.shortName = shortName || null
      paramsObj.state = state === '' ? null : state
      return paramsObj
    },
    // 获取试题列表
    async list() {
      const paramsObj = this.buildParams()
      const res = await list(paramsObj)
      this.tableData = res.data.items
      this.counts = res.data.counts
    },
    // 搜索按钮
    async searchFn() {
      // 重置页码
      this.form.page = 1
      // 重发请求
      this.list()
    },
    // 获取学科详情
    async subDetail(id) {
      id = this.form.subjectID
      const res1 = await simpleDir({ subjectID: id })
      this.catalog = res1.data
      const res2 = await simpleTags({ subjectID: id })
      this.tags = res2.data
    },
    subChange() {
      this.subDetail()
    },
    // 渲染学科
    async simple() {
      const res = await simple()
      this.sub = res.data
    },
    // 新增试题
    addQuestionFn() {
      this.$router.push('new')
    },

    // 清除表单
    removeFn() {
      this.form = {
        subjectID: '', // 学科
        catalogID: '', // (二级)目录
        tags: '', // 标签(名称)
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业名称
        provAndCity: {
          province: '',
          city: ''
        }
      }
      // this.$refs.form.resetFields()
    },
    // 枚举题型
    formatter(row, column, cellValue, index) {
      const obj = questionType.find((item) => item.value === Number(cellValue))
      return obj ? obj.label : '未知'
    },
    // 枚举难度
    formatter1(row, column, cellValue, index) {
      const obj = difficulty.find((item) => item.value === Number(cellValue))
      return obj ? obj.label : '未知'
    },
    // 预览
    async reviewFn(id) {
      this.dialogTableVisible = true
      const res = await detail({ id })
      // console.log(res)
      this.dialog = res.data
      this.checkList = res.data.options
      this.radioList = res.data.options
      this.playerOptions.sources[0].src = res.data.videoURL
      if (res.data.questionType === '1') {
        this.isShow = '1'
      } else if (res.data.questionType === '2') {
        this.isShow = '2'
      } else {
        this.isShow = '3'
      }
    },
    // 修改
    reviseFn(id) {
      this.$router.push({ path: 'new', query: { id: id }})
    },
    // 加入精选
    async choiceFn(id) {
      const confirmRes = await this.$confirm(
        '此操作将该题目加入精选, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }
      ).catch((err) => err)
      if (confirmRes === 'cancel') return
      await choiceAdd({ id: id, choiceState: this.choiceState })
      this.$message.success('加入精选成功')
      this.list()
      this.choiceState = 0
    },
    // 去掉日期数据中的T 和Z
    myFuncton(time) {
      var d = time ? new Date(time) : new Date()
      var year = d.getFullYear()
      var month = d.getMonth() + 1
      var day = d.getDate()
      var hours = d.getHours()
      var min = d.getMinutes()
      var seconds = d.getSeconds()

      if (month < 10) month = '0' + month
      if (day < 10) day = '0' + day
      if (hours < 0) hours = '0' + hours
      if (min < 10) min = '0' + min
      if (seconds < 10) seconds = '0' + seconds

      return (
        year + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + seconds
      )
    },
    // 删除功能
    async delFn(id) {
      const confirmRes = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (confirmRes === 'cancel') return this.$message('您取消了删除')
      await remove({ id })
      this.$message.success('删除成功')
      this.list()
    },
    // 分页
    handleSizeChange(val) {
      this.form.pagesize = val
      if (this.form.page === 1) {
        this.list()
      }
    },
    handleCurrentChange(val) {
      this.form.page = val
      this.list()
    },
    // 视频组件
    async fullScreen() {
      this.isShowscreen = true
    },
    closeDialog() {
      this.dialogTableVisible = false
    },
    // 监听弹框的关闭事件
    closeFn() {
      this.isShowscreen = false
    }
  }
}
</script>

<style  scoped>
.explain {
  color: rgb(255, 192, 203);
  font-size: 12px;
}
.form {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
}
.form .item {
  width: 25%;
}
.el-select {
  width: 100%;
}
.city1 {
  width: 48%;
  margin-right: 13px;
}
.city2 {
  width: 48%;
}

.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #f4f4f5;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.text {
  display: block;
  margin-left: 20px;
  padding-top: 10px;
  color: #909399;
  font-size: 14px;
}
.el-icon-info {
  margin-right: 8px;
}
.table {
  margin-top: 15px;
  /* background: black; */
}
.pag {
  margin-top: 25px;
}
.screen {
  width: 500px;
}
.el-divider {
  margin-bottom: 8px;
  margin-top: -5px;
}
.button {
  display: block;
}
</style>
